<template>
	<z-common-box boxShadow marginTop="35rpx">
		<view class="flex flex-ai-center flex-js-sb">
			<w-big-title :title="`我的抽签码(${info.my_code.length})`"></w-big-title>
			<view @click="zlShow = true" class="font-color-textPrimary font-size-14">助力获取抽次数></view>
		</view>
		<view class="flex flex-w">
			<view v-for="(item,index) in info.my_code" :key="index" class="list_box font-size-14 mt-20 mr-10">{{item}}</view>
			<view class="font-color-666 mt-20 font-size-14" v-if="!info.my_code.length">暂无</view>
		</view>
		<u-gap height="1" bgColor="#f5f5f5" marginBottom="15" marginTop="20"></u-gap>
		<view @click="actionJump(4)" class="flex flex-ai-center flex-js-sb font-color-theme font-size-14">
			<view class="font-color-textPrimary">参与人数</view>
			<view class="flex flex-ai-center font-color-textPrimary">
				<text>已产生</text>
				<text style="color: #FF303B;">{{info.total_num}}</text>
				<text>抽签码></text>
			</view>
		</view>
		<w-model title="助力吧！少年" :show="zlShow" is_show_btn :cancelShow="false" confirmText="返回" @confirm="zlShow = false">
			<view slot="content" class="mt-16">
				<view class="flex flex-ai-center flex-js-sb">
					<view class="flex flex-dir-col">
						<view class="font-color-theme_title font-size-14 font-w-bold">邀请好友助力</view>
						<view class="font-color-666 font-size-10 mt-6">每成功邀请1个，获得1次抽签</view>
					</view>
					<view class="flex flex-dir-col flex-ai-center">
						<view class="font-color-666 font-size-10 mt-6">有效总次数<text class="font-color-theme">{{appConfig.olduser_dayhelp_num}}</text>次</view>
						<!-- <view @click="actionJump(1)" class="btn mt-6">去邀请</view> -->
						<w-button @click="actionJump(1)" size="mini" class="mt-10">去邀请</w-button>
					</view>
				</view>
				<view class="flex flex-ai-center flex-js-sb mt-16">
					<view class="flex flex-dir-col">
						<view class="font-color-theme_title font-size-14 font-w-bold">
							<text>蓝水晶助力</text>
							<text class="font-color-textPrimary ml-4">我的蓝水晶: <text class="font-color-theme">{{userInfo.crystal_blue}}</text></text>
						</view>
						<view class="font-color-666 font-size-10 mt-6">使用蓝水晶兑换，获得1次抽签</view>
					</view>
					<view class="flex flex-dir-col flex-ai-center">
						<view class="font-color-666 font-size-10 mt-6">剩余:<text class="font-color-theme">{{info.my_score_help_num}} </text>次</view>
						<w-button v-if="info.my_score_help_num <= 0 || userInfo.crystal_blue < info.my_score_help_num" disabled  size="mini" class="mt-10">兑换-{{config.score_helpdraw_sub}}</w-button>
						<w-button @click="actionJump(2)" v-else  size="mini" class="mt-10">兑换-{{config.score_helpdraw_sub}}</w-button>					
					</view>
				</view>
				<view class="flex flex-ai-center flex-js-sb mt-16">
					<view class="flex flex-dir-col">
						<view class="font-color-theme_title font-size-14 font-w-bold">分享社群</view>
						<view class="font-color-666 font-size-10 mt-6">截图上传，审核通过后可获得1次抽签</view>
					</view>
					<view class="flex flex-dir-col flex-ai-center">
						<view class="font-color-666 font-size-10 mt-6">剩余:<text class="font-color-theme">{{info.my_share_num}}</text>次</view>
						<w-button @click="actionJump(3)" v-if="info.my_share_num"  size="mini" class="mt-10">去分享</w-button>
						<w-button @click.native="actionJump(3)" v-else disabled  size="mini" class="mt-10">查看分享</w-button>
					</view>
				</view>
			</view>
		</w-model>
		<w-model v-model="scoreChangeshow" is_show_btn content="确定用蓝水晶兑换抽签次数吗？" @confirm="confirmHDtimes"></w-model>
	</z-common-box>
</template>

<script>
	import { mapState } from "vuex"
	import { scorechange } from "@/api/draw/index.js"
	import drawMixin from '@/mixins/draw.js'
	export default {
		name:'myDrawCode',
		mixins:[drawMixin],
		props:{
			product:	{
				type:Object,
				default: () => {
					return {}
				}
			},
			info: {
				type: Object,
				default () {
					return {
						my_code:[]
					}
				}
			},
		},
		data(){
			return {
				zlShow:false,  //助力弹框
				type:0,
				scoreChangeshow:false,  // 积分兑换抽签次数积分
				is_submit:false
			}
		},
		mounted() {
			uni.$on('changezlShow',() => {
				this.zlShow = !this.zlShow
			})
		},
		computed:{
			...mapState('user',['userInfo']),
			...mapState('config',{
				config(state) {
					return state.info
				}
			})
		},
		methods:{
			actionJump(type){
				let data = {
					goods_id:this.drawBase.id,
					goods_type:this.product.goods_type
				}
				let info = this.product
				switch(type) {
					case 1:
					info.goods_id = this.drawBase.id
						uni.setStorage({
							key:'invitFriend',
							data:info,
							success() {
								uni.navigateTo({  //邀请好友助力
									url:"/pages/draw/InvitationFriendAssist/InvitationFriendAssist"
								})
							}
						})
						break
					case 2:
						this.zlShow = false
						this.scoreChangeshow = true
					break
						case 3:		
						if(this.info.my_share_num == 0) data.share_number = this.info.my_share_num
						uni.navigateTo({  //社区分享
							url:"/pages/draw/communityShare/communityShare?data=" + JSON.stringify(data)
						})
					break
					case 4:
					uni.setStorage({
						key:'invitFriend',
						data:info,
						success() {
							uni.navigateTo({  //跳转排行榜
								url:"/pages/draw/Leaderboard/Leaderboard?data=" + JSON.stringify(data)
							})  
						}
					})					
					break	
				}
			},
			//确定积分兑换次数
			confirmHDtimes(){
				this.scoreChangeshow = false
				if(this.is_submit) return 
				this.is_submit = true
				uni.showLoading({
					title:'兑换中',
					mask:true
				})
				let data = {
					goods_id:this.drawBase.id,
					goods_type:this.product.goods_type
				}
				scorechange(data).then( res => {
					uni.hideLoading()
					uni.showToast({
						title:'兑换成功！'
					})
					setTimeout(() => {
						uni.$emit('signUpChange')
						setTimeout(() => this.is_submit = false,1000)
						this.$store.dispatch('user/getUserInfo')
					},1500)
				}).catch( err => {
					uni.hideLoading()
					setTimeout(() => this.is_submit = false,3000)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list_box {
		padding: 8rpx;		
		border-radius: 8rpx;
		@extend .bg_jb_theme;
		color: #fff;
	}
	.btn {
		padding: 5rpx 34rpx;
		border-radius: 24rpx;
		@extend .bg_jb_theme;
		color: #fff;
		font-size: 10rpx;
	}
</style>